<template>  
  <div class="fulltable">  
    <div class="full">  
    <div>  
      <el-select v-model="selectedType" placeholder="选择任务类型" @change="filterTasks" style="margin-right: 10px; width: 200px;" clearable>  
        <el-option v-for="type in taskTypes" :key="type" :label="type" :value="type"></el-option>  
      </el-select>  

      <el-input  
        v-model="searchQuery"  
        placeholder="搜索标题"  
        @input="filterTasks"  
        style="margin-right: 10px; width: 200px;" 
        clearable 
      ></el-input>  

      <el-select v-model="selectedPromoter" placeholder="选择发起人" @change="filterTasks" style="margin-right: 20px; width: 200px;" clearable>  
        <el-option v-for="promoter in promoters" :key="promoter" :label="promoter" :value="promoter"></el-option>  
      </el-select>  
    </div>
      <el-table  
        :data="paginatedTaskData"  
         :height="tableHeight" 
        border  
        style="width: 100%"  
      >  
        <el-table-column  
          prop="type"  
          label="任务类型"  
          width="100"  
        ></el-table-column>  
        <el-table-column  
          prop="title"  
          label="标题"  
          width="180"  
        ></el-table-column>  
        <el-table-column  
          prop="desc"  
          label="描述"  
          width="200"  
        ></el-table-column>  
        <el-table-column  
          prop="starttime"  
          label="开始时间"  
          width="180"  
        ></el-table-column>  
        <el-table-column  
          prop="deadline"  
          label="结束时间"  
          width="180"  
        ></el-table-column>  
        <el-table-column  
          prop="promoter"  
          label="发起人"  
          width="120"  
        ></el-table-column>  
        <el-table-column  
          prop="deptname"  
          label="部门"  
          width="120"  
        ></el-table-column>  
        <el-table-column  
          prop="state"  
          label="状态"  
          width="80"  
        ></el-table-column>  
        <el-table-column label="操作">  
          <template slot-scope="scope">  
            <el-button type="primary" @click="viewItem(scope.row)" size="small">详情</el-button>  
          </template>  
        </el-table-column>  
      </el-table>  
      <el-pagination  
        @current-change="handleCurrentChange"  
        @size-change="handleSizeChange" 
        :current-page="currentPage"  
        :page-sizes="pageSizes"
        :page-size="pageSize" 
        :total="filteredTaskData.length"  
        layout="total, sizes, prev, pager, next, jumper"  
        style="margin-top: 20px;"  
      ></el-pagination>
    </div> 
    <el-dialog title="任务详情" :visible.sync="showDetailDialog" width="50%">  
  <el-form :model="selectedTask" label-width="80px">  
    <el-row>  
      <el-col :span="12">  
        <el-form-item label="任务类型">  
          <el-input v-model="selectedTask.type" disabled></el-input>  
        </el-form-item>  
      </el-col>  
      <el-col :span="12">  
        <el-form-item label="任务标题">  
          <el-input v-model="selectedTask.title" disabled></el-input>  
        </el-form-item>  
      </el-col>  
    </el-row>  
    <el-row>  
      <el-col :span="12">  
        <el-form-item label="优先级">  
          <el-input v-model="selectedTask.priority" disabled></el-input>  
        </el-form-item>  
      </el-col>   
      <el-col :span="12">  
        <el-form-item label="开始时间">  
          <el-input v-model="selectedTask.starttime" disabled></el-input>  
        </el-form-item>  
      </el-col>  
    </el-row>  
    <el-row>  
      <el-col :span="12">  
        <el-form-item label="结束时间">  
          <el-input v-model="selectedTask.deadline" disabled></el-input>  
        </el-form-item>  
      </el-col>  
      <el-col :span="12">  
        <el-form-item label="发起人">  
          <el-input v-model="selectedTask.promoter" disabled></el-input>  
        </el-form-item>  
      </el-col>  
    </el-row>  
    <el-row>  
      <el-col :span="12">  
        <el-form-item label="部门">  
          <el-input v-model="selectedTask.deptname" disabled></el-input>  
        </el-form-item>  
      </el-col>  
      <el-col :span="12">  
        <el-form-item label="负责人">  
          <el-input v-model="selectedTask.charge" disabled></el-input>  
        </el-form-item>  
      </el-col>  
    </el-row>  
    <el-row>  
      <el-col :span="12">  
        <el-form-item label="任务描述">  
          <el-input type="textarea" v-model="selectedTask.desc" disabled></el-input>  
        </el-form-item>  
      </el-col>  
      <el-col :span="12">  
        <el-form-item label="接收人">  
          <el-input type="textarea" v-model="selectedTask.recipient" disabled></el-input>  
        </el-form-item>  
      </el-col>  
    </el-row>  
    <el-row>  
      <el-col :span="12">  
        <el-form-item label="状态">  
          <el-input v-model="selectedTask.state" disabled></el-input>  
        </el-form-item>  
      </el-col>  
      <el-col :span="12">  
        <el-form-item label="评价">  
          <el-input type="textarea" v-model="selectedTask.evaluate" disabled></el-input>  
        </el-form-item>  
      </el-col>  
    </el-row>  
  </el-form>  
  <div slot="footer" class="dialog-footer">  
    <el-button @click="showDetailDialog = false">取 消</el-button>  
  </div>  
</el-dialog> 
  </div>  
</template>  

<script>  
import { getMyTaskList,getTaskDetailById } from "@/api/task";  
import {addLog} from '@/api/log';
export default {  
data() {  
  return {  
    logItem:{
              mn:'',
              opn:'',
              res:''
      },
    myTaskData: [],  
    filteredTaskData: [],  
    paginatedTaskData: [],  
    searchQuery: '', // 用于搜索标题  
    selectedType: '', // 当前选择的任务类型  
    selectedPromoter: '', // 当前选择的发起人  
    currentPage: 1,  
    pageSize: 10,  
    pageSizes: [5, 10, 20, 40, 60],  
    tableHeight: 250,  
    taskTypes: ["公事", "私事"], // 任务类型  
    promoters: [], // 用于存储发起人列表  
    showDetailDialog: false, // 控制对话框显示  
    selectedTask: {} // 存储选中任务的详情  
  };  
}, 
  methods: {  
    handleSizeChange(size) {  
    this.pageSize = size; // 更新每页显示数量  
    this.currentPage = 1; // 重置为第一页  
    this.logItem.mn = "handleSizeChange";
      this.logItem.opn = "改变每页显示的任务数量-我的任务";
      this.logItem.res = "true";
      addLog(this.logItem);
    this.updatePaginatedData(); // 更新分页数据  
  },  
async fetchMyTaskList() {  
  try {  
    const response = await getMyTaskList();  
    this.myTaskData = response.data;  
    this.filteredTaskData = this.myTaskData;  
    
    // 提取发起人列表  
    this.promoters = [...new Set(this.myTaskData.map(task => task.promoter))]; // 使用 Set 去重  
    this.updatePaginatedData();  
  } catch (error) {  
    console.error('获取任务列表失败:', error);  
  }  
}, 
async viewItem(row) {  
  console.log("查看的任务id",row.id)
    try {  
      const response = await getTaskDetailById(row.id); // 假设任务对象有一个 id 属性  
      this.logItem.mn = "viewItem";
      this.logItem.opn = "查看任务详情-我的任务";
      this.logItem.res = "true";
      addLog(this.logItem);
      this.selectedTask = response.data; // 假设返回的数据在 response.data 中  
      this.showDetailDialog = true; // 打开对话框  
    } catch (error) {  
      console.error('获取任务详情失败:', error);  
      this.logItem.mn = "viewItem";
      this.logItem.opn = "查看任务详情-我的任务";
      this.logItem.res = "false";
      addLog(this.logItem);
      this.$message.error('获取任务详情失败，请重试。');  
    }  
  },   
filterTasks() {  
  const query = this.searchQuery.toLowerCase();  
  this.filteredTaskData = this.myTaskData.filter(task => {  
    const matchesTitle = task.title.toLowerCase().includes(query);  
    const matchesType = this.selectedType ? task.type === this.selectedType : true;  
    const matchesPromoter = this.selectedPromoter ? task.promoter === this.selectedPromoter : true;  

    return matchesTitle && matchesType && matchesPromoter;  
  });  

  this.updatePaginatedData(); // 过滤后更新分页数据  
},
    updatePaginatedData() {  
      const totalPages = Math.ceil(this.filteredTaskData.length / this.pageSize);  
      if (this.currentPage > totalPages) {  
        this.currentPage = totalPages; // 如果当前页超过总页数，重置为最后一页  
      }  
      const start = (this.currentPage - 1) * this.pageSize;  
      const end = start + this.pageSize;  
      this.paginatedTaskData = this.filteredTaskData.slice(start, end);  
      
      // 根据当前页的数据数量动态调整表格高度  
      const rowHeight = 60; // 每行假设高度为 60px  
      const visibleRows = this.paginatedTaskData.length || 1; // 至少有 1 行  
      this.tableHeight = Math.min(visibleRows * rowHeight + 70, 700); // 确保表格不超过最大高度 500px  
      if(this.tableHeight<350){
        this.tableHeight = 350
      }
    },
    handleCurrentChange(page) {  
      this.currentPage = page; // 更新当前页  
      this.logItem.mn = "handleCurrentChange";
      this.logItem.opn = "改变页码-我的任务";
      this.logItem.res = "true";
      addLog(this.logItem);
      this.updatePaginatedData(); // 更新分页数据  
    }
  },  
  created() {  
    this.fetchMyTaskList(); // 组件创建时获取任务列表  
  }  
};  
</script>  

<style lang="less" scoped>  
.fulltable {  
  margin-top: 20px;  
  height: 700px;  
}  
.full {  
  min-height: 350px; /* 确保这个区域不小于250px */ 
  height: 800px;  
  margin: 0;  
  padding: 0;  
  background: pink;  
  padding-top: 10px;  
  margin-left: 20px;  
  margin-right: 20px;  
  border-radius: 10px;  
  flex: 1;  
}  
.add {  
  padding: 10px;  
}  
/deep/.el-table .cell {  
  color: black;  
}  

  /deep/ .el-pagination {
    display: flex;  
    justify-content: flex-end;  
  }
</style>